<script setup>
import {reactive} from "vue"
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import {getUserInfo} from "../storage/storage";

const storeGroup = reactive({
  store:useStore(),
  init(){
    console.log(getUserInfo())
    userGroup.username = getUserInfo().username;
    userGroup.account = getUserInfo().account;
  }
})

const routerGroup = reactive({
  router:useRouter(),
  route:useRoute(),
  linkUserInfo(){
    routerGroup.router.push({name:"userInfo"});
  },
  linkUserCollect(){
    routerGroup.router.push({name:"userCollect"});
  },
  linkUserConfig(){
    routerGroup.router.push({name:"userConfig"});
  }
})

const userGroup = reactive({
  username:"",
  account:"",
})

storeGroup.init();
</script>

<template>
  <div class="user-menu">
    <div class="user-info-box">
      <el-row>
        <el-col :lg="5" :md="6" :sm="6" :xl="3" :xs="8">
          <div class="grid-content">
            <div id="personMenu">
              <div class="middle-box">
                <div class="info">
                  <img alt="" src="http://118.178.254.102:1252/head.jpg" width="100">
                  <p>昵称：</p>
                  <p class="info-input" style="font-size: 12px">{{userGroup.username}}</p>
                  <p>账号：</p>
                  <p class="info-input" style="font-size: 12px">{{userGroup.account}}</p>
                </div>
                <div class="menu">
                  <el-menu :default-openeds="['1', '1']">
                    <el-menu-item index="1-1" @click="routerGroup.linkUserInfo">我的信息</el-menu-item>
                    <el-menu-item index="1-2" @click="routerGroup.linkUserCollect">我的收藏</el-menu-item>
                    <el-menu-item index="1-4" @click="routerGroup.linkUserConfig">设置</el-menu-item>
                  </el-menu>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :lg="19" :md="18" :sm="18" :xl="21" :xs="16">
          <div class="grid-content">
            <router-view></router-view>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped src="../css/user.css">

</style>
